<?php
echo $this->Html->css('web/org_subscription.css');
echo $this->Html->script('app.plugin.js');
echo $this->Html->script('moment.min.js');
echo $this->Html->script('combodate.js');
$clef_app_id = Configure::read('clef_app_id');
$clef_redirect_url = Configure::read('clef_redirect_url');
$clef_js = $this->webroot.'js/clef.js';
?>

<style>
    #login_form .block div {
        padding: 0px 5px;
    }
    
    .landing{
        padding-top:10px;
    }
</style>

<div class="container">
    <div class="row">

        <section id='login_panel' class="panel">

            <div class="panel-heading bg-light lter" style="overflow: hidden;">
                <div class="col-lg-12">
                    <div class="col-lg-5 col-sm-5">
                        <h1><?php echo $this->Html->image('core/memberz-logo.png', array('border' => '0', 'width' => 48, 'height' => 48)); ?> MEMBERZ</h1>
                    </div>

                    <div class="col-lg-6 col-sm-7 col-sm-offset-0 col-lg-offset-1">
                        <form id='login_form' class='form' data-validate="parsley" method="post" action="<?php echo $this->Html->url(array('controller' => 'member', 'action' => 'login')); ?>" >
                            
                            <div class='m-t block' style='overflow: hidden;'>
                                <div class="col-lg-5 col-md-5 hidden-sm hidden-xs">
                                    <label class="text-sm">Email</label>
                                </div>

                                <div class="col-lg-5 col-md-5 hidden-sm hidden-xs">
                                    <label class="text-sm">Password</label>
                                </div>
                            </div>

                            <div class='block' style='overflow: hidden;'>
                                <div class="col-lg-5 col-md-5 col-sm-6 m-b-sm">
                                    <input type="text" name="username" class='form-control input-sm' placeholder='Username' required value="" />
                                </div>

                                <div class="col-lg-5 col-md-5 col-sm-4 m-b-sm">
                                    <input type='password' name='password' class='form-control input-sm' placeholder='Password' required value="" />
                                </div>

                                <div class="col-lg-2 col-md-2 col-sm-2 m-b-sm">
                                    <button type="submit" class="btn btn-sm btn-success" style="text-align:right">
                                        <i class='fa fa-sign-in'></i> Log in
                                    </button>
                                </div>
                            </div>

                            <div class='block' style="overflow: hidden;">
                                <div class="col-lg-3 col-md-5 col-sm-6 col-xs-6">
                                    <label class="text-xs">
                                        <input type="checkbox" name="remember_me" value="1"> Keep me signed in
                                    </label>
                                </div>

                                <div class="col-lg-3 col-md-5 col-sm-6 col-xs-6">
                                    <label class="text-xs">
                                        <a href="<?php echo $this->Html->url(array('controller' => 'member', 'action' => 'forgot_password')); ?>">Forgot Password?</a>
                                    </label>
                                </div>

                                <!--<div class="col-lg-6 col-md-5 col-sm-6 col-xs-6">
                                    <div class="clef-wrapper">
                                        <script type="text/javascript" src="<?php /*echo $clef_js; */?>" class="clef-button" data-app-id="<?php /*echo $clef_app_id; */?>" data-color="blue" data-style="flat" data-redirect-url="<?php /*echo $clef_redirect_url; */?>" data-type="login"></script>
                                    </div>
                                </div>-->
                            </div>
                            
                            <div class='col-lg-12 visible-xs' style='margin-top: 25px; display: block;'>
                                <p class='text-sm text-center'>Don't Have An Account?</p>
                                <button type="button" class="btn btn-block btn-info" id='sign-up-btn'>Sign Up</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="panel-body hidden-xs">
                <!-- Left Banner Starts -->
                <div class="col-lg-5 col-md-5 hidden-xs hidden-sm" style="padding-top:10px">
                    <?php echo $this->Html->image('core/memberz_group.jpg', array('border' => '0')); ?>
                </div>
                <!-- Left Banner Ends -->

                <!-- Right Form Starts -->
                <div id='sign_up_panel' class="col-lg-6 col-md-5 col-sm-offset-1 hidden-xs">

                    <h2 class="m-t-sm">Free Sign Up</h2>

                    <form class='form-horizontal' data-validate="parsley" method="post" action="<?php echo $this->Html->url(array('controller' => 'member', 'action' => 'signup')); ?>" >

                        <div class="form-group">
                            <label class="col-sm-3 control-label">Name</label>
                            <div class="col-sm-9 controls form-inline">          
                                <input type="text" class="form-control input-s-sm inline" required="" name='Member[first_name]' placeholder="First Name"> 
                                <input type="text" class="form-control input-s-sm inline" required="" name='Member[last_name]' placeholder="Last Name">
                            </div>  
                        </div>


                        <div class='form-group'>
                            <label class="col-sm-3 control-label">Email</label>
                            <div class='col-sm-9 controls'>
                                <input type="email" name="MemberAccount[username]" class='form-control input-s-lg ' placeholder='Email' required="" value="" />
                            </div>
                        </div>

                        <div class='form-group'>
                            <label class="col-sm-3 control-label">Password</label>
                            <div class='col-sm-9 controls'>
                                <input type="password" name="MemberAccount[password]" class='form-control input-s-lg ' placeholder='Password' required="" value="" />
                            </div>
                        </div>

                        <div class='form-group'>
                            <label class="col-sm-3 control-label">Gender</label>
                            <div class='col-sm-8 controls'>
                                <select name="Member[gender]" required="" class="form-control input-s-lg ">
                                    <option value="">Choose Gender</option>
                                    <option value="Male">Male</option>
                                    <option value="Female">Female</option>
                                </select>
                            </div>
                        </div>


                        <div class='form-group'>
                            <label class="col-sm-3 control-label">Date of Birth</label>
                            <div class='col-sm-9 controls'>
                                <input type="text" class="combodate form-control " required="" data-format="YYYY-MM-DD" data-template="MMM DD YYYY" name="Member[dob]" value="">
                                <input type='hidden' name='MemberAccount[timezone]' id='timezone' value='' />
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-9 col-sm-offset-3">
                                <p class="text-xs">
                                    By clicking Sign Up, you agree to our 
                                    <a class="text-info" href="#">Terms</a> and conditions of service and our 
                                    <a class="text-info" href="#">Data Use Policies</a>.
                                </p>
                            </div>
                        </div>

                        <div class='form-group'>
                            <label class="col-sm-3 control-label"></label>
                            <div class='col-sm-9 controls'>
                                <button type="submit" class="btn btn-success"><i class='fa fa-pencil'></i> Sign Up</button>
                                <button type="button" id='sign_up_cancel' class="btn btn-danger hidden"><i class='fa fa-pencil'></i> Cancel</button>
                            </div>
                        </div>

                        <!--<h5 class="clear text-center" style="margin-top: 30px;">
                            <a class="text-info" href="<?php echo $this->Html->url(array('controller' => 'organisation', 'action' => 'register', 'web' => true)); ?>">
                                Setup an organisation
                            </a> to manage your members.
                        </h5>-->
                    </form>
                </div>
            </div>
            <div class='panel-footer text-left bg-light lter text-xs'>
                <span style="padding-right:20px">&copy; 2014 Matrix Designs. </span> 
                <!--<span style="padding-right:20px"><a href="#">Terms</a></span>  
                <span style="padding-right:20px"><a href="#">Privacy Policy</a></span>-->
            </div>
        </section>
    </div>
</div>

<?php echo $this->Html->script('plugins/jstz-1.0.4.min.js'); ?>
<script>
$(document).ready(function() {
    $("#sign-up-btn").click(function() {
        $("#login_panel .panel-body, #login_panel .panel-body #sign_up_panel").removeClass("hidden-xs");
        $("#login_panel .panel-heading").addClass("hidden-xs");
        $("#sign_up_cancel").removeClass("hidden");
    });
    
    $("#sign_up_cancel").click(function() {
        $("#login_panel .panel-body, #login_panel .panel-body #sign_up_panel").addClass("hidden-xs");
        $("#login_panel .panel-heading").removeClass("hidden-xs");
        $("#sign_up_cancel").addClass('hidden');
    });
    
    var tz = jstz.determine().name();
    
    if( tz == 'Etc/UTC') {
        tz = 'UTC';
    }
    
    $("#timezone").val( tz );
});
</script>